<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this的应用</title>
</head>

<body>
    <div class="bcclass" onmouseover="this.style.backgroundColor='rgb(136, 235, 177)'" onmouseout="MouseOut(this)"></div>
    <div class="bcclass" onmouseover="this.style.backgroundColor='rgb(136, 235, 177)'" onmouseout="MouseOut(this)"></div>
    <div class="bcclass" onmouseover="this.style.backgroundColor='rgb(136, 235, 177)'" onmouseout="MouseOut(this)"></div>
    <div class="bcclass" onmouseover="this.style.backgroundColor='rgb(136, 235, 177)'" onmouseout="MouseOut(this)"></div>
    <div class="bcclass" onmouseover="this.style.backgroundColor='rgb(136, 235, 177)'" onmouseout="MouseOut(this)"></div>
    <div class="bcclass" onmouseover="this.style.backgroundColor='rgb(136, 235, 177)'" onmouseout="MouseOut(this)"></div>
    <script type="text/javascript">
        document.write('<p style="color:red;"><br><br><br>注：将 this 放在事件中，this表示当前正在操作的元素。</p>')
        document.write('<p style="color:red;"><br><br><br>注：this可以当作参数进行传递，传递的是this所指代的元素（正在操作的元素）。</p>')
        document.write('<p style="color:red;"><br><br><br>注：使用事件监听进行绑定事件时，会自动的将正在操作的元素对象传递给监听函数。</p>')
        document.write('<p style="color:red;"><br><br><br>注：在使用行内样式绑定事件时，如果是 onclick="func(this)时，是需要写参数this的；如果是onmouseover="this.style.backgroundColor=“rgb(136, 235, 177)”"，则不需要写。"</p>')
        function func(a) { //参数为 this所指代的元素。
            a.innerText = '点击了第一个元素' + Math.floor(Math.random() * 10);
            a.style.backgroundColor = 'blue';
        }
        function func2() {
            this.style.height = '400px';
        }
        function MouseOut(a){
            a.style.backgroundColor='red';
        }
        window.onload = function () {
            var a = document.getElementsByClassName('bcclass');
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    //可以将 this所指代的元素当作参数进行传递。
                    func(this);
                }
                //在事件监听中，会将正在操作的元素传递给监听函数使用（会将this关键字传递给监听函数使用），监听函数中依然使用this关键字。
                a[i].addEventListener('click', func2);
                MouseOut(this);
            }
        }
    </script>
    <style>
        .bcclass {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            color: rgb(136, 235, 177);
            font-size: 20px;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</body>

</html>